import React from 'react'
import Child from './Child'
import './index.css'

/**
  1、使用 `ES6 class` 来定义一个组件:：
    1.1 使用构造方法 
    1.2 直接定义state对象
    1.3 方法定义使用箭头函数
    1.4 方法定义使用bind(this)传入组件实例
 */
export default class Life extends React.Component {
    // 1.1
    constructor(props) {
        super(props)
        this.state = {
            count: 0,
            date: new Date()
        }
    }

    // 1.2
    // state = {
    //     count: 0
    // }

    // 1.3
    handleAdd=() => {
        this.setState({
            count: this.state.count + 1
        })
    }
    
    // 1.4
    handleAddBindThis() {
        this.setState({
            count: this.state.count + 1
        })
    }

    /** React生命周期
     2、生命周期钩子
        2.1 当组件输出到 DOM 后会执行 componentDidMount() 钩子
        2.2 在componentWillUnmount()生命周期钩子中卸载计时器
     */
    componentDidMount() {
        // 在 this 中保存定时器ID
        this.timerID = setInterval(
          () => this.tick(),
          1000
        )
    } 

    componentWillUnmount() {
        clearInterval(this.timerID);
    }

    tick() {
        this.setState({
            date: new Date()
        })
    }

    render() {
        // let style = {
        //     padding:50
        // }
        return <div className='content'>
            <p>React生命周期介绍</p>
            <button onClick={this.handleAdd}>点击一下</button>
            <button onClick={this.handleAddBindThis.bind(this)}>点击一下</button>
            <p>{this.state.count}</p>
            <p>{this.state.date.toLocaleTimeString()}</p>
            <Child name="hello, I am Child" count={this.state.count} />
        </div>
    }
}